<!DOCTYPE html>
<html>
<head>
    <title>switch</title>
    <link rel="Stylesheet" href="../lib/css/j3.css" />
    <script type="text/javascript" src="../lib/js/j3.js"></script>
</head>
<body>
<div style="width:300px">
  <p id='switch1'></p>
  <p id='switch2'></p>
</div>
<script type="text/javascript">
    j3.ready(function () {
        var switch1 = new j3.Switch({ctnr:'switch1', checked:true});
        var switch2 = new j3.Switch({ctnr:'switch2'});

        switch1.on('change', function(sender){
            switch2.setChecked(!sender.getChecked());
            }
        );
    });
</script>
</body>
</html>
